<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - 登录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="auth-container fade-in">
            <div class="auth-header">
                <img src="logo.svg" alt="五子棋Logo" class="auth-logo">
                <h1>五子棋在线对战</h1>
            </div>
            
            <form id="loginForm">
                <div class="form-group">
                    <input type="text" class="form-control" id="username" placeholder="请输入账号" required>
                    <div class="error-message" id="username-error"></div>
                </div>
                
                <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                    <div class="error-message" id="password-error"></div>
                </div>
                
                <button type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
                
                <div class="auth-footer">
                    <p>还没有账号？ <a href="register.html" class="auth-link">注册新账号</a></p>
                </div>
            </form>
            
            <div class="auth-footer">
                <p>五子棋在线对战 - 随时随地与棋友切磋</p>
                <p>&copy; 2025 五子棋在线对战平台</p>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 简单的表单验证
            let isValid = true;
            
            if (!username) {
                document.getElementById('username-error').textContent = '请输入账号';
                isValid = false;
            } else {
                document.getElementById('username-error').textContent = '';
            }
            
            if (!password) {
                document.getElementById('password-error').textContent = '请输入密码';
                isValid = false;
            } else {
                document.getElementById('password-error').textContent = '';
            }
            
            // 如果验证通过，模拟登录成功并跳转
            if (isValid) {
                // 这里应该是实际的登录API调用
                // 模拟登录成功
                setTimeout(function() {
                    window.location.href = 'hall.html';
                }, 1000);
            }
        });
    </script>
</body>
</html>
